<template>
  <div class="table-container">
    <el-table :data="questionList" v-loading="loading" style="width: 100%" height="500px" border stripe>
      <el-table-column prop="questionId" width="150px" label="题目ID" />
      <el-table-column prop="title" label="题目标题" min-width="200" />
      <el-table-column prop="difficulty" label="题目难度" width="100px">
        <template #default="{ row }">
          <div v-if="row.difficulty === 1" class="difficulty easy">简单</div>
          <div v-if="row.difficulty === 2" class="difficulty medium">中等</div>
          <div v-if="row.difficulty === 3" class="difficulty hard">困难</div>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="140px" />
      <el-table-column prop="createTime" label="创建时间" width="180px" />
      <el-table-column label="操作" width="120px" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="onEdit(row.questionId)">编辑</el-button>
          <el-button type="text" class="red" @click="onDelete(row.questionId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 模拟数据
const loading = ref(false);
const questionList = ref([
  {
    questionId: "Q1001",
    title: "两数之和",
    difficulty: 1,
    createName: "张三",
    createTime: "2023-06-15 10:30",
  },
  {
    questionId: "Q1002",
    title: "反转链表",
    difficulty: 2,
    createName: "李四",
    createTime: "2023-06-16 14:20",
  },
  {
    questionId: "Q1003",
    title: "二叉树遍历",
    difficulty: 3,
    createName: "王五",
    createTime: "2023-06-17 09:45",
  },
  // 添加更多数据以测试滚动效果
  ...Array.from({ length: 20 }, (_, i) => ({
    questionId: `Q1${i + 100}`,
    title: `题目${i + 100}`,
    difficulty: (i % 3) + 1,
    createName: ["张三", "李四", "王五"][i % 3],
    createTime: `2023-06-${String(18 + (i % 10)).padStart(2, "0")} ${(i % 10) + 8}:${i % 60}`,
  })),
]);

// 编辑事件
const onEdit = (id) => {
  console.log("编辑题目:", id);
};

// 删除事件
const onDelete = (id) => {
  console.log("删除题目:", id);
};
</script>

<style scoped>
.table-container {
  margin: 20px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.difficulty {
  font-weight: bold;
}

.easy {
  color: #67c23a;
}

.medium {
  color: #e6a23c;
}

.hard {
  color: #f56c6c;
}

.red {
  color: #f56c6c;
}
</style>
